<!DOCTYPE HTML>
<html>
	<head>
		<title>91Book</title>
		<meta charset="utf-8">
		<link href='css/nav.css' rel='stylesheet'>
		<link href='css/index.css' rel='stylesheet'>
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div class='navTop'>
			<div class='main' id='app'>
				<div class='navIn'>
					<a href='/'><span>91Book</span></a>
					<div class='search'>
						<input class='txt' type='text' placeholder='    Search here..' required>
						<input type="image" name="imageField" class='btn' src="img/search.png">
					</div>
					<div class='user'>
						<a href='denglu'>登录/注册</a> 
					</div>
				</div>


				<div class='navSec'>
					<div class='toplist'>
					<ul>
						<h1 id='h1'>图书排行榜</h1>
						<li><a href="#">2016亚马逊图书排行榜</a></li>
						<li><a href="#">2016亚马逊图书排行榜</a></li>
						<li><a href="#">豆瓣2016年度读书榜单</a></li>
						<li><a href="#">豆瓣2016年读书报告</a></li>
					</ul>
			 			



					</div>
					<div class='imgTo'>
						<div class='btnL'></div>
						<div class='imgMain'><img src='img/img.jpg'></div>
						<div class='btnR'></div>
					</div>
				</div>
			<div>
				<div class='newBook book'>
					<span class='txt'>New</span>
					<span class='more'> >>more </span>
					<ul v-for="newBook in newBooks">
						<li>
							<div class='books' v-on:click="showBook()">
								<a id='turnBook' href='book'><img :src='newBook.url'></a>
								<span>{{newBook.name}}</span>
							</div>
						</li>
					</ul>
				</div>

				<div class='HotBook book'>
					<span class='txt'>Hot</span>
					<span class='more'> >>more </span>
					<div class='booklist'>
						<ul v-for="hotBook in hotBooks">
							<li>
								<div class='books' v-on:click="showBook()">
									<a href="book"></a><img :src='hotBook.url'>
									<span>{{hotBook.name}}</span>
								</div>
							</li>
						</ul>				
					</div>
				</div>
			</div>
		</div>
	</div>


	<script type="text/javascript">

	var vm = new Vue({
		el: "#app",
		data: {
			newBooks: "",
			hotBooks: "",
	
		},

		beforeCreate(){
			jQuery.ajax({
				type: "Get",
				url: "http://172.16.186.66:4001/a",
				success: function (data) {
					vm.newBooks = data.newBook,
					vm.hotBooks = data.hotBook;
				}
			});

		}
	});
	</script>
	</body>
</html>

